<script lang="ts" setup>
import { computed } from "vue";
import { getSize } from "../utils";

interface TextProps {
  size?: number;
  bold?: boolean;
  color?: string;
  align?: string;
  through?: boolean;
  ellipsis?: string | number;
}

const props = withDefaults(defineProps<TextProps>(), {
  size: 14,
  bold: false,
  align: "left",
  through: false,
});

function getColor(value: any) {
  if (value === undefined) return null;
  const map: { [index: string]: string } = {
    gray: "var(--text-gray)",
    red: "#ff0000",
    primary: "var(--primary-color)",
    secondary: "var(--secondary-color)",
  };
  return value?.indexOf("#") !== -1 ? value : map[value];
}

const styles = computed<any>(() => {
  const newStyles: any = {
    lineHeight: `${props.size}px`,
    fontSize: `${props.size}px`,
    color: getColor(props.color),
    fontWeight: props.bold ? "bold" : "normal",
    textAlign: props.align,
    textDecoration: props.through ? "line-through" : "none",
  };
  if (props.ellipsis) {
    newStyles.width = getSize(props.ellipsis);
  }
  return newStyles;
});

const classNames = computed(() => {
  return props.ellipsis ? "umrp-text-ellipsis" : "";
});
</script>

<template>
  <span class="umrp-text" :style="styles" :class="classNames">
    <slot></slot>
  </span>
</template>

<style lang="scss" scoped>
.umrp-text {
  display: inline-block;
}

.umrp-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
